<template>
<div>
  <div class="myheader">
    <div class="left" @click="goBack(path)"><img src="../../assets/left.png" alt=""></div>

    <div class="box">
      <div class="collect">
        <slot name="collect"></slot>
      </div>
      <div class="clock">
        <img src="../../assets/clock.png" alt="">
        <span ref="clock">00:00</span>
      </div>
      <div class="note">
        <slot name="note"><div></div></slot>
      </div>
    </div>


    <div class="right">
      <slot name="up"><div></div></slot>
    </div>
  </div>
  <div class="headh"></div>
</div>
</template>

<script>
export default {
  name: 'myheader',
  props:{
    path: {
      type: String,
      default: "",
    },
  },
  data () {
    return {
      minute:0,
      second:0,
      timer:''
    }
  },
  created () {
    this.timer = setInterval(this.startTimer,1000)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    goBack(path){
      if(!path){
        window.history.back();
      }else{
        this.$router.push({ name:path })
      }
    },

    // 计时器
    startTimer(){
      this.second += 1;
      if (this.second >=60){
        this.second = 0;
        this.minute += 1;
      }
      this.$refs.clock.innerHTML = (this.minute < 10 ? '0' + this.minute : this.minute) + ':' + (this.second < 10 ? '0' + this.second : this.second)
    }
  },

}
</script>

<style lang="less" scoped>
.headh{height: 44px;}
.myheader{
  height: 44px;
  width: 100%;
  line-height: 44px;
  background-color: #ff8333;
  font-size: 16px;
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  .left{
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    img{
      display: block;
      width: 100%;
    }
  }
  .right{
    position: absolute;
    top: 50%;
    right: 15px;
    height: 100%;
    font-size: 16px;
    transform: translateY(-50%);
  };
}
.box{
  width: 220px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .collect{
    width: 20px;
    img{display: block;width: 100%;}
  }
  .clock{
    display: flex;
    align-items: center;
    img{display: inline-block;width: 20px;}
    span{display: inline-block;margin-left: 5px;font-size: 14px;line-height: 14px;}
  }
}
</style>
